<!-- 压力统计的页面 -->
<template>
  <div id="maind">
    <h1 id="titile">水流统计表</h1>
    <div id="pressure-nav">
      <div class="left">
        <div>日期</div>
        <div>
          <a-range-picker
            @change="onChange"
            @select="onSelect"
            style="width: 254px; marginbottom: 20px"
            show-confirm-btn
            clear
            @ok="ok"
          />
        </div>
        <a-button type="primary" @click="changeList">查询</a-button>
        <a-button type="dashed" @click="timeRest">重置</a-button>
      </div>
      <div class="rigth">
        <a-button type="primary" @click="fileOut">导出</a-button>
      </div>
    </div>
    <div>
      <PressureList></PressureList>
    </div>
    <div class="list-statistics">
      <div></div>
      <div>
        <a-pagination
          :total="13"
          show-total
          show-page-size
          @change="changeList"
          @page-size-change="limitSize"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 文件导出配置文件
import { excelExport2 } from "../../utils/excel-sdk";
import PressureList from "./component/FlowLIst.vue";
// import { excelExport2 } from "../utils/excel-sdk";
import { userPressureData } from "../../store/pressureData";
import { computed, watch } from "vue";
import { CalendarValue } from "@arco-design/web-vue/es/date-picker/interface";
let pressureData = userPressureData();
pressureData.dataInit(1, 10, ["asd"]);
let onChange = () => {};
let onSelect = () => {};
let timeRest = () => {
  pagenumber.page = 1;
  pagenumber.limit = 10;
  pagenumber.timeValue = [];
  pressureData.dataInit(
    pagenumber.page,
    pagenumber.limit,
    pagenumber.timeValue
  );
};
// 文件导出
let fileOut = () => {
  excelExport2(
    pressureData.dataList,
    {
      address: "地址",
      addressId: "地址id",
      nowPressure: "当前值",
      uploadTime: "上传时间",
      ResponseTimes: "应测次数",
      actualTimes: "实测次数",
      qualifiedTimes: "合格次数",
      qualifiedProbability: "合格率",
      averageValue: "平均值",
      miniPressure: "最小值",
      miniTime: "最小时间",
      maxPressure: "最大值",
      maxTime: "最大时间",
    },
    "压力表"
  );
};

// 数据表的页码和每页条数

interface PagenumberType {
  page: number;
  limit: number;
  timeValue: Array<string>;
}

let pagenumber: PagenumberType = {
  page: 1,
  limit: 10,
  timeValue: [],
};

let limitSize = (size: number) => {
  pagenumber.limit = size;
  // console.log(pagenumber);
  pressureData.dataInit(
    pagenumber.page,
    pagenumber.limit,
    pagenumber.timeValue
  );
  return pagenumber.limit;
};
let changeList = (current: any) => {
  pagenumber.page = current;
  pressureData.dataInit(
    pagenumber.page,
    pagenumber.limit,
    pagenumber.timeValue
  );
  // console.log(pagenumber);
};

let ok = (value: CalendarValue[]) => {
  pagenumber.timeValue = value as string[];
  // console.log(pagenumber.timeValue);
  // console.log(timeValue);
};
</script>

<style scoped>
#maind {
  height: 100%;
  margin-top: 70px;
}

#titile {
  color: #4e5969;
  margin: 10px;
  border-left: 5px solid #8dd1ff;
  padding-left: 20px;
  text-align: left;
  margin: 30px 0;
}
#pressure-nav {
  width: 100%;
  height: 60px;
  border: 1px solid #d9f0ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#pressure-nav button {
  border-radius: 3px;
}
#pressure-nav .left {
  display: flex;
  width: 440px;
  height: 30px;
  justify-content: space-around;
  align-items: center;
  padding-left: 30px;
}
#pressure-nav .rigth {
  padding-right: 30px;
}

.list-statistics {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: 10px;
}
</style>
